<template>
  <div>
    <span v-if="!coverUrl">
      <ri style="color: #409eff" @click="openImgUpload" i="upload"></ri>&nbsp;
      <span @click="openImgUpload">上传封面</span>
    </span>

    <img v-if="coverUrl" :src="coverUrl" @click="openImgUpload" />
    <img-upload
      field="file"
      @crop-success="onCropSucc"
      @crop-upload-success="onCropUploadSucc"
      @crop-upload-fail="onCropUploadFail"
      v-model="showImgUpload"
      :width="188"
      :height="265"
      url="/api/v1/upload/img"
      :params="params"
      :headers="headers"
      img-format="png"
    ></img-upload>
  </div>
</template>
 
<script>
import ImgUpload from "vue-image-crop-upload";
export default {
  components: {
    ImgUpload,
  },
  data() {
    return {
      book : {}
    }
  },
  computed: {
    coverUrl() {
      if (this.book.cover) {
        return `/res/img/${this.book.cover}_file.png`;
      } else {
        return "";
      }
    },
  },
  methods: {
    openImgUpload() {
      this.showImgUpload = true;
    },
    onCropSucc(imgUrl, field) {
      console.log("crop succ!", field);
      //this.imgUrl = imgUrl
    },
    onCropUploadSucc(json, field) {
      console.log("upload succ!", json, field);
      let imgid = json.imgid;
      this.book.cover = imgid;
      console.log(this.book);
    },
    onCropUploadFail() {
      console.log("upload faile!");
    },
  },
};
</script>